<template>


    <el-button type="primary"  @click="handleAdd">
       新增角色
      </el-button>
    <el-table :data="tableData" style="width: 100%">
        <el-table-column label="角色名称" prop="roleName" />
        <el-table-column label="角色编码" prop="roleKey" />
        <el-table-column label="备注" prop="remark" />
        <el-table-column label="创建时间" prop="createTime" />
        <el-table-column align="right">
          <template #header>
        <el-input v-model="queryForm.query"  @input="initUserList" placeholder="请输入内容"></el-input>
          </template>
          <template #default="scope">
            <el-button size="small"  type="primary" @click="handleEdit(scope.$index, scope.row)">
              编辑
            </el-button>
            <el-button
              size="small"
              type="primary"
              @click="handleDelete(scope.$index, scope.row)" >
             配置菜单
            </el-button>
            <el-button size="small"  type="primary" @click="deleteRole(scope.row.roleId)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          v-model:current-page="queryForm.pageNum"
          v-model:page-size="queryForm.pageSize"
          :page-sizes="[10, 20, 30, 40]"
          :size="size"
    
          background layout="prev, pager, next"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
    
        <el-dialog v-model="dialogFormVisible" title="新增角色" width="500">
          <el-form :model="ruleFrom" :rules="rules" ref="formRef" label-width="auto" style="max-width: 600px">
      
        <el-form-item prop="roleName" label="角色名称">
          <el-input v-model="ruleFrom.roleName" placeholder="请输入角色名称"></el-input>
        </el-form-item>
        <el-form-item prop="roleKey" label="角色编码">
          <el-input   v-model="ruleFrom.roleKey" placeholder="请输入角色编码"></el-input>
        </el-form-item>
        
          <el-form-item label="备注" prop="remark" >
            <div style="margin: 20px 0" />
            <el-input v-model="ruleFrom.remark"  placeholder="请输入备注"/>
          </el-form-item>
       
      </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="resetForm">取消</el-button>
            <el-button type="primary" @click=" submitForm()">
              提交
            </el-button>
          </div>
        </template>
      </el-dialog>

      <el-dialog v-model="menuConfigFormVisible" title="菜单配置" width="1000">
            <el-row >
                <el-col :span="12">
                    <el-table :data="sourceMenu" style="width: 80%">
                            <el-table-column label="菜单" width="180" prop="menuName" />
                            <el-table-column align="right">
                            <template #default="scope">
                                <el-button size="small"  type="primary" @click="addConfig(scope.$index, scope.row)">
                                   添加菜单配置
                                </el-button>
                            </template>
                            </el-table-column>
                      </el-table>
                </el-col>
                <el-col :span="12">
                    <el-table :data="configMenu" style="width:80%">
                            <el-table-column label="已配置菜单" width="180" prop="menuName" />
                            <el-table-column align="right">
                            <template #default="scope">
                                <el-button size="small"  type="primary" @click="unConfig(scope.$index, scope.row)">
                                   取消菜单配置
                                </el-button>
                            </template>
                            </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
            <template #footer>
          <div class="dialog-footer">
            <el-button @click="menuConfigFormVisible=false">取消</el-button>
            <el-button type="primary" @click=" submitMenuConfig()">
              确认配置
            </el-button>
          </div>
        </template>
      </el-dialog>
    </template>
    
    <script  setup>
         import {ref,reactive} from 'vue';
         import request from '@/util/request';
         import { ElMessage ,ElMessageBox} from 'element-plus'
          const menuConfigFormVisible = ref(false)
         const dialogFormVisible = ref(false)
         const tableData=ref([]);
         const sourceMenu=ref([]);
         const configMenu=ref([]);
         const ruleId=ref('');
         const total=ref(0);
         const queryForm=ref({
            query:"",
            pageNum:1,
            pageSize:10
         })
         const initUserList=async ()=>{
           const res= await request.post("/role/list",queryForm.value)
           tableData.value=res.data.data.userList;
           total.value=res.data.data.total;
         }
         initUserList();
         const handleSizeChange=(pageSize)=>{
            queryForm.value.pageNum=1;
            queryForm.value.pageSize=pageSize
            initUserList();
         }
         const handleCurrentChange=(pageNum)=>{
            queryForm.value.pageNum=pageNum;
            initUserList();
         }

     const ruleFrom = reactive({
            roleId:'',
            roleName:'',
            roleKey:'',
            remark:''
    })
    
    const formRef = ref(null);
    const rules = {
        roleName: [
        { required: true, message: '请输入角色名称', trigger: 'blur',whitespace: true }
      ],
      roleKey: [
        { required: true, message: '请输入角色编码', trigger: 'blur' ,whitespace: true}
      ]
    };

    const deleteRole=(id)=>{
  ElMessageBox.confirm(
          '确认删除',
          'Warning',
          {
            confirmButtonText: 'OK',
            cancelButtonText: 'Cancel',
            type: 'warning',
          }
      ).then(() => {
          request.get("role/"+id).then(res=>{
            if(res.data.code==200){
              initUserList()
              ElMessage.success("删除成功")
            }else{
              ElMessage.error(res.data.msg);
            }
          })
    })}
     
    const submitForm = () => {
      formRef.value.validate((valid) => {
        if (valid) {
          request.post("role/saveOrUpdate",ruleFrom).then(res=>{
           if(res.data.code==200){
            initUserList();
            dialogFormVisible.value = false
            ElMessage.success("新增成功")
           }else{
            ElMessage.error(res.data.msg);
           }
          })
        } else {
          return false;
        }
      });
    };
    const handleEdit=(index,row)=>{
     let obj=  Object.assign({}, row)
     ruleFrom.roleId=obj.roleId;
     ruleFrom.roleName=obj.roleName;
     ruleFrom.roleKey=obj.roleKey;
     ruleFrom.remark=obj.remark;
    dialogFormVisible.value = true
    }


    const handleDelete =(index,row)=>{
     let obj=  Object.assign({}, row)
     ruleId.value=obj.roleId;
     request.get("role/getMenu/"+obj.roleId).then(res=>{
           if(res.data.code==200){
             let dataMap= res.data.data;
             sourceMenu.value = dataMap.notMenu;
             configMenu.value = dataMap.inMenu;
            menuConfigFormVisible.value = true
           }else{
            ElMessage.error(res.data.msg);
           }
          })
    }
    
    const handleAdd=()=>{
      dialogFormVisible.value = true
    }
    
    const resetForm = () => {
      ruleFrom.roleId='';
     ruleFrom.roleName='';
     ruleFrom.roleKey='';
     ruleFrom.remark='';
          dialogFormVisible.value = false
        }

        
    const  addConfig = (index,row)=>{
      let item=  sourceMenu.value[index];
      configMenu.value.push(item)
      sourceMenu.value.splice(index, 1);
    }
    const  unConfig = (index,row)=>{
      let item=  configMenu.value[index];
      sourceMenu.value.push(item)
      configMenu.value.splice(index, 1);
    }

    const ruleMenu = reactive({
        roleId:ruleId,menu:configMenu
    })
    const submitMenuConfig =()=>{
        request.post("role/addMenu",ruleMenu).then(res=>{
           if(res.data.code==200){
             menuConfigFormVisible.value = false
            ElMessage.success("新增成功")
           }else{
            ElMessage.error(res.data.msg);
           }
          })

    }

    </script>
    
    <style lang="scss" scoped>
    
    </style>
    